<template>
  <div style="padding-top: 74px;">
    <div class="row">
      <!-- <a-icon type="close-circle" theme="filled" class="icon" style="color:#FA5051;" v-if="vJson.errorDataCount > 0" /> -->
      <a-icon type="check-circle" theme="filled" class="icon" style="color:#8CD579;" />
    </div>
    <div class="row">
      <!-- <div class="tit" v-if="vJson.errorDataCount > 0">考勤数据导入失败</div> -->
      <div class="tit">考勤数据导入完成</div>
    </div>
    <div class="row content">
      <div class="content-one"><span></span>共导入{{ vJson.allDataCount }}条数据</div>
      <div class="content-two">
        成功导入{{ vJson.allDataCount - vJson.errorDataCount }}条数据,
        <span style="color: red">{{ vJson.errorDataCount }}</span> 条数据导入失败。
      </div>
    </div>
    <div class="row">
      <a-button style="margin-right:24px;" @click="$emit('onAction', 0)">重新上传</a-button>
      <a-button style="margin-right:24px;" type="primary" @click="onSubmit">
        数据同步
      </a-button>
      <a-button type="primary" @click="onExport" :disabled="vJson.errorDataCount <= 0">导出错误数据</a-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { getCalculateSalary } from "../api";

export default {
  props: {
    vJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    onSubmit() {
      this.onGetCalculateSalary();
    },
    async onGetCalculateSalary() {
      try {
        await getCalculateSalary(this.vJson.recordId);
        this.$router.go(-1);
        this.$store.commit("check/componentName", "imports");
        this.$notification.success({ message: "操作成功" });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onExport() {
      const token = this.$store.state.auth.token;
      let params = {};
      params = {
        // templateName: "allEmployeeSalary.xlsx"
      };
      axios({
        url: `/hr/api/v1/attendanceDataTemps/errorDataExcelByRecordId/${this.vJson.recordId}`,
        params,
        paramsSerializer: param => {
          return qs.stringify(param, { indices: false });
        },
        method: "GET",
        responseType: "blob",
        headers: {
          token: token
        }
      })
        .then(res => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", "考勤错误数据.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(err => {
          console.log("error log --> ", err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.row {
  width: 836px;
  margin: 0 auto;
  text-align: center;
  .icon {
    width: 64px;
    height: 64px;
    font-size: 64px;
    margin-bottom: 28px;
  }
  .tit {
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 24px;
  }
}
.content {
  height: 102px;
  background: #fafafa;
  border: 1px solid #f1f1f1;
  padding: 24px 0;
  text-align: left;
  margin-bottom: 30px;
  .content-one {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 8px;
    span {
      display: inline-block;
      width: 6px;
      height: 6px;
      border: 1px solid var(--primary);
      border-radius: 50%;
      vertical-align: middle;
      margin: -2px 8px 0 22px;
    }
  }
  .content-two {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    margin-left: 36px;
  }
}
</style>
